<template>
  <view class="doula-record-container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">导乐陪伴分娩工作记录表</text>
    </view>
    
    <!-- 基本信息 -->
    <CollapsibleSection title="基本信息" :isExpanded="sections.basic" @toggle="toggleSection('basic')">
      <view class="form-grid">
        <view class="form-item">
          <text class="label">产妇姓名：</text>
          <nut-input 
            v-model="formData.motherName" 
            placeholder="请输入产妇姓名"
            class="input-field"
          />
        </view>
        <view class="form-item">
          <text class="label">年龄：</text>
          <nut-input 
            v-model="formData.age" 
            type="number"
            placeholder="请输入年龄"
            class="input-field"
          />
        </view>
        <view class="form-item">
          <text class="label">导乐师：</text>
          <nut-input 
            v-model="formData.doula" 
            placeholder="请输入导乐师姓名"
            class="input-field"
          />
        </view>
        <view class="form-item">
          <text class="label">宫口打开程度：</text>
          <view class="input-with-unit">
            <nut-input 
              v-model="formData.cervicalDilation" 
              type="number"
              placeholder="0"
              class="input-field small"
            />
            <text class="unit">cm</text>
          </view>
        </view>
        <view class="form-item full-width">
          <text class="label">服务开始时间：</text>
          <nut-input 
            v-model="formData.serviceStartTime" 
            placeholder="请输入服务开始时间"
            class="input-field"
          />
        </view>
      </view>
    </CollapsibleSection>
    
    <!-- 导乐前评估 -->
    <CollapsibleSection title="导乐前评估" :isExpanded="sections.assessment" @toggle="toggleSection('assessment')">
      <view class="assessment-group">
        <text class="group-title">产妇精神状态：</text>
        <view class="checkbox-group">
          <view 
            v-for="(option, index) in mentalStateOptions" 
            :key="index"
            class="checkbox-item"
            :class="{ active: formData.mentalState[index] }"
            @click="formData.mentalState[index] = !formData.mentalState[index]"
          >
            <view class="checkbox-dot" :class="{ checked: formData.mentalState[index] }"></view>
            <text>{{ option }}</text>
          </view>
        </view>
      </view>
      
      <view class="assessment-group">
        <text class="group-title">产妇类型：</text>
        <view class="checkbox-group">
          <view 
            class="checkbox-item"
            :class="{ active: formData.isPrimipara }"
            @click="formData.isPrimipara = !formData.isPrimipara"
          >
            <view class="checkbox-dot" :class="{ checked: formData.isPrimipara }"></view>
            <text>初产妇</text>
          </view>
          <view 
            class="checkbox-item"
            :class="{ active: formData.isMultipara }"
            @click="formData.isMultipara = !formData.isMultipara"
          >
            <view class="checkbox-dot" :class="{ checked: formData.isMultipara }"></view>
            <text>经产妇</text>
          </view>
          <view class="inline-input">
            <text>第 </text>
            <nut-input 
              v-model="formData.pregnancyNumber" 
              type="number"
              placeholder="1"
              class="input-field tiny"
            />
            <text> 胎</text>
          </view>
        </view>
      </view>
      
      <view class="assessment-group">
        <text class="group-title">家属对导乐的态度：</text>
        <view class="checkbox-group">
          <view 
            class="checkbox-item"
            :class="{ active: formData.familySupport }"
            @click="formData.familySupport = !formData.familySupport"
          >
            <view class="checkbox-dot" :class="{ checked: formData.familySupport }"></view>
            <text>支持</text>
          </view>
          <view 
            class="checkbox-item"
            :class="{ active: formData.familyOppose }"
            @click="formData.familyOppose = !formData.familyOppose"
          >
            <view class="checkbox-dot" :class="{ checked: formData.familyOppose }"></view>
            <text>不支持</text>
          </view>
        </view>
      </view>
    </CollapsibleSection>
    
    <!-- 非药物镇痛服务 -->
    <CollapsibleSection title="非药物镇痛服务" :isExpanded="sections.service" @toggle="toggleSection('service')">
      <view class="service-list">
        <view 
          v-for="(service, index) in nonDrugServices" 
          :key="index"
          class="service-item"
        >
          <view class="service-name">{{ service.name }}</view>
          <view class="service-time">{{ service.time }}</view>
          <nut-input 
            v-model="formData.nonDrugServices[index].count" 
            type="number"
            placeholder="0"
            class="count-input"
          />
        </view>
      </view>
    </CollapsibleSection>
    
    <!-- 体位管理服务 -->
    <CollapsibleSection title="体位管理服务" :isExpanded="sections.position" @toggle="toggleSection('position')">
      <view class="service-list">
        <view 
          v-for="(position, index) in positionServices" 
          :key="index"
          class="service-item"
        >
          <view class="service-info">
            <text class="service-name">{{ position.name }}</text>
            <text class="service-time">{{ position.time }}</text>
          </view>
          <nut-input 
            v-model="formData.positionServices[index].count" 
            type="number"
            placeholder="0"
            class="count-input"
          />
        </view>
      </view>
    </CollapsibleSection>
    
    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="save-btn" @click="saveRecord">保存记录</button>
      <button class="reset-btn" @click="resetForm">重置表单</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import Taro from '@tarojs/taro'
import CollapsibleSection from '@/components/CollapsibleSection.vue'

// 折叠状态
const sections = reactive({
  basic: true,
  assessment: false,
  service: false,
  position: false
})

// 表单数据
const formData = reactive({
  motherName: '',
  age: '',
  doula: '',
  cervicalDilation: '',
  serviceStartTime: '',
  mentalState: [false, false, false, false, false],
  isPrimipara: false,
  isMultipara: false,
  pregnancyNumber: '',
  familySupport: false,
  familyOppose: false,
  nonDrugServices: Array(10).fill({ count: '' }),
  positionServices: Array(10).fill({ count: '' })
})

// 精神状态选项
const mentalStateOptions = ['疲倦', '抑郁', '焦虑', '暴躁', '紧张']

// 非药物镇痛服务列表
const nonDrugServices = [
  { name: '按摩头部', time: '15-30分钟/次' },
  { name: '按摩肩部', time: '15-30分钟/次' },
  { name: '按摩背部', time: '15-30分钟/次' },
  { name: '按摩腰部', time: '15-30分钟/次' },
  { name: '按摩腿部', time: '15-30分钟/次' },
  { name: '水疗', time: '20分钟/次' },
  { name: '黄豆袋热敷', time: '15分钟/次' },
  { name: '呼吸减痛', time: '每次宫颈起止' },
  { name: '音乐镇痛', time: '依产妇需求' },
  { name: '香薰疗法', time: '依产妇需求' }
]

// 体位管理服务列表
const positionServices = [
  { name: '站立/散步/曼舞', time: '15-20分钟/次' },
  { name: '蹲', time: '15-20分钟/次' },
  { name: '分娩球', time: '15-20分钟/次' },
  { name: '同侧侧卧位', time: '15-20分钟/次' },
  { name: '同侧侧俯卧位', time: '15-20分钟/次' },
  { name: '开放式膝胸卧位', time: '15-20分钟/次' },
  { name: '支撑蹲位', time: '15-20分钟/次' },
  { name: '不对称位', time: '15-20分钟/次' },
  { name: '前倾位（站立/跪式、坐）', time: '15-20分钟/次' },
  { name: '手膝位', time: '15-20分钟/次' }
]

// 保存记录
const saveRecord = () => {
  console.log('保存记录:', formData)
  Taro.showToast({
    title: '保存成功',
    icon: 'success',
    duration: 1500
  })
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    motherName: '',
    age: '',
    doula: '',
    cervicalDilation: '',
    serviceStartTime: '',
    mentalState: [false, false, false, false, false],
    isPrimipara: false,
    isMultipara: false,
    pregnancyNumber: '',
    familySupport: false,
    familyOppose: false,
    nonDrugServices: Array(10).fill({ count: '' }),
    positionServices: Array(10).fill({ count: '' })
  })
  
  Taro.showToast({
    title: '表单已重置',
    icon: 'success',
    duration: 1500
  })
}

// 切换折叠状态
const toggleSection = (name: string) => {
  sections[name as keyof typeof sections] = !sections[name as keyof typeof sections]
}
</script>

<style lang="scss" scoped>
.doula-record-container {
  // min-height: 100vh;
  background: #f5f7fa;
  padding: 24rpx 20rpx 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 24rpx;
  padding: 28rpx;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.25);
  
  .title {
    font-size: 34rpx;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5rpx;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  
  .form-item {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    
    &.full-width {
      grid-column: 1 / -1;
    }
    
    .label {
      font-size: 26rpx;
      color: #334155;
      font-weight: 600;
    }
    
    .input-field {
      border: 2rpx solid #e2e8f0;
      border-radius: 12rpx;
      padding: 16rpx 20rpx;
      font-size: 28rpx;
      background: #ffffff;
      
      &.small {
        width: 100rpx;
      }
      
      &.tiny {
        width: 70rpx;
      }
    }
    
    .input-with-unit {
      display: flex;
      align-items: center;
      gap: 10rpx;
      
      .unit {
        font-size: 26rpx;
        color: #64748b;
      }
    }
  }
}

.assessment-group {
  margin-bottom: 28rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .group-title {
    font-size: 26rpx;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 16rpx;
    display: block;
  }
  
  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    
    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 10rpx;
      padding: 12rpx 20rpx;
      background: #ffffff;
      border: 2rpx solid #e2e8f0;
      border-radius: 24rpx;
      font-size: 26rpx;
      color: #475569;
      transition: all 0.3s ease;
      
      &.active {
        background: #f0f4ff;
        border-color: #6366f1;
        color: #4338ca;
      }
      
      .checkbox-dot {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        border: 2rpx solid #cbd5e1;
        background: #ffffff;
        transition: all 0.3s ease;
        
        &.checked {
          background: #6366f1;
          border-color: #6366f1;
          position: relative;
          
          &::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-size: 20rpx;
            font-weight: bold;
          }
        }
      }
    }
    
    .inline-input {
      display: flex;
      align-items: center;
      gap: 8rpx;
      font-size: 26rpx;
      color: #475569;
    }
  }
}

.service-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-top: 16rpx;
  border: 1rpx solid #e5e7eb;
}

.service-item {
  display: flex;
  flex-direction: column;
  padding: 32rpx 24rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #f3f4f6;
  
  &:last-child {
    border-bottom: none;
  }
  
  .service-name {
    font-size: 30rpx;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 8rpx;
  }
  
  .service-time {
    font-size: 24rpx;
    color: #6b7280;
    margin-bottom: 16rpx;
  }
  
  .count-input {
    width: 100%;
    border: 1rpx solid #d1d5db;
    border-radius: 8rpx;
    padding: 16rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
    color: #111827;
    background: #f9fafb;
  }
}

.action-buttons {
  display: flex;
  gap: 16rpx;
  margin-top: 32rpx;
  padding: 0 10rpx;
  align-items: center;
  justify-content: center;
  
  button {
    flex: 1;
    height: 88rpx;
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    border: none;
    transition: all 0.3s ease;
    
    &.save-btn {
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
      color: #ffffff;
      margin: 0 !important;
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(99, 102, 241, 0.2);
      }
    }
    
    &.reset-btn {
      background: #ffffff;
      color: #64748b;
      border: 2rpx solid #cbd5e1;
      margin: 0 !important;
      
      &:active {
        background: #f8fafc;
      }
    }
  }
}
</style>
